{% extends 'base.html' %}

{% block content %}
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend id="titleLeg"> 防火墙</legend>
    </fieldset>
    <div>
        <p>
            <small>说明: 除北京内网映射关系有序列跟序列ID</small>
        </p>
        <p>
            <small> 廊坊序号跟序列ID从40000开始\腾讯云序号跟序列ID从50000开始</small>
        </p>
    </div>

    <div class="col-md-8">

        <form method="post" id="mapforms">
            <div class="form-group">
                <label for="serialnumber" class="col-sm-2 control-label">序号</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" id="serialnumber" placeholder="serialnumber"
                           name="serialnumber" maxlength="5">
                </div>
                <div class="col-sm-3"><p class="error-message"></p></div>
            </div>
            {#            <div></div>#}

            <div class="form-group">
                <label for="protocols" class="col-sm-2 control-label">协议</label>
                <div class="col-sm-5 ">
                    <select id="protocols" class="form-control">
                        <option value="TCP">TCP</option>
                        <option value="UDP">UDP</option>
                    </select>
                </div>
                <div class="col-md-3"><p class="error-message"></p></div>
            </div>

            <div class="form-group">
                <label for="inaddress" class="col-sm-2 control-label">内网地址</label>
                <div class="col-sm-5">
                    <select id="inaddress" class="form-control js-example-basic-single" name="inaddress_id">
                    </select>
                </div>

                <div class="col-md-3">
                    <a href="" class="btn btn-default" id="inmapshow">查看</a>
                    <a href="" class="btn btn-success" id="inmapadd">添加</a>
                </div>
                <div class="col-md-3"><p class="error-message"></p></div>
            </div>

            <div class="form-group">
                <label for="inport" class="col-sm-2 control-label">内网端口</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" id="inport" placeholder="端口范围1-65535" name="inport"
                           maxlength="5">
                </div>
                <div class="col-md-3"><p class="error-message"></p></div>
            </div>

            <div class="form-group">
                <label for="outaddress" class="col-sm-2 control-label" autocapitalize="off">外网地址</label>
                <div class="col-sm-5">
                    <select id="outaddress" class="form-control js-example-basic-single" name="outaddress_id">
                    </select>
                </div>
                <div class="col-md-3">
                    <a href="" class="btn btn-default" id="outmapshow">查看</a>
                    <a href="" class="btn btn-success" id="outmapadd">添加</a>
                </div>
                <div class="col-md-3"><p class="error-message"></p></div>
            </div>

            <div class="form-group">
                <label for="outport" class="col-sm-2 control-label">外网端口</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" id="outport" placeholder="端口范围1-65535" name="outport"
                           maxlength="5">
                </div>
                <div class="col-md-3"><p class="error-message"></p></div>
            </div>

            <div class="form-group">
                <label for="sequenceid" class="col-sm-2 control-label">序列ID</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" id="sequenceid" placeholder="序列ID号, 非自增" name="sequenceid"
                           maxlength="5">
                </div>
                <div class="col-md-3"><p class="error-message"></p></div>
            </div>

            <div class="col-md-offset-2" style="padding-top: 30px">
                <button type="button" class="btn btn-primary btn-block" id="butn">提交</button>
            </div>
        </form>
    </div>

    <div class="col-md-4"></div>

{% endblock %}

{% block script %}
    {{ super() }}

    <script>
        $(function () {
            // 加载select2插件
            $('.js-example-basic-single').select2();
            // 获取url 中的position值 也就是哪个位置的映射
            var inmaps = "fw_inmaps";
            var outmaps = "fw_outmaps";
            $("#inaddress").html(inLoadSelect(inmaps));
            $("#outaddress").html(inLoadSelect(outmaps));
            // 渲染抬头名称
            Title(3);
            var _position = document.location.pathname.split('/')[3];
            // 渲染 查看的标签
            $("#inmapshow").attr('href', '/fwmap/fwaddindex/' + inmaps + '/' + _position);
            $("#inmapadd").attr('href', '/fwmap/fwcreate/' + inmaps + '/' + _position);
            $("#outmapshow").attr('href', '/fwmap/fwaddindex/' + outmaps + '/' + _position);
            $("#outmapadd").attr('href', '/fwmap/fwcreate/' + outmaps + '/' + _position);
        });

        function inLoadSelect(tablename) {
            var parknames = [];
            var _position = document.location.pathname.split('/')[3];
            $.ajax({
                url: "{{ url_for('fwmap.GetAddress') }}",
                type: "get",
                dataType: 'json',
                async: false,
                data: {"tablename": tablename, "position": _position},
                success: function (data) {
                    if (data.code == "10000") {
                        var xxx = data.data[0];
                        for (i = 0, len = xxx.length; i < len; i++) {
                            var parkdata = xxx[i];
                            parknames.push('<option value="' + parkdata[0] + '">  ' + parkdata[1] + '</option>')
                        }
                    }
                }
            });
            return parknames;
        }


    </script>
{% endblock %}